<template>
    <nav>
        <van-tabs v-model:active="curActive" animated swipeable lazy-render>
            <van-tab :title="item.name" v-for="(item, index) in cateList" :key="item.id">
                <header>
                    <div class="item name">
                        {{ t('home.Market.name') }}
                    </div>
                    <div class="item auto">
                        {{ t('home.Market.price') }}
                    </div>
                    <div class="item price">
                        {{ t('home.Market.increase') }}
                    </div>
                </header>
                <div class="goods" v-for="ele in item.goods" :key="ele.id" @click="getDetail(ele)">
                    <div class="item name">
                        {{ `${ele.pairsName}` }}
                    </div>
                    <div class="item auto">
                        {{ ele.priceVo.close.toFixed(5) }}
                    </div>
                    <div :class="['item', 'price', ele.priceVo.rate > 0 ? 'red' : 'green']">
                        {{ `${(ele.priceVo.rate * 100).toFixed(2)}%` }}
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </nav>
</template>

<script setup>
import useLanguage from '@/hooks/useLanguage';
import { marketApi } from '@/api'
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
import { $animationInterVal } from '@/hooks/requestAnimationFrame'
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user';
import { useRouter } from 'vue-router'
const { t } = useLanguage()

const router = useRouter()
const userStore = UserStore()
const { cateList, cateId } = storeToRefs(userStore)

const curActive = ref(0);

async function getCateList() {
    const { code, data } = await marketApi.cateList()
    if (code === 20000) {
        cateList.value = data
    }
}

async function getAllGoods() {
    const promises = []
    for (const v of cateList.value) {
        promises.push(getMarketList(v.id))
    }
    for await (const res of promises) {
        if (res.length > 0) {
            const cateId = res[0].cateId
            cateList.value.map(v => {
                if (v.id == cateId) {
                    if (v.goods) {
                        for (const key in res) {
                            if (Object.hasOwnProperty.call(res, key)) {
                                const element = res[key];
                                try {
                                    v.goods[key].priceVo.close = element.priceVo.close
                                    v.goods[key].priceVo.rate = element.priceVo.rate
                                } catch (error) {
                                    Object.assign(v.goods[key].priceVo, element.priceVo)
                                }
                                // console.log({ pairsName: v.goods[key].pairsName, ...v.goods[key].priceVo });
                            }
                        }
                    } else {
                        v.goods = []
                        for (const key in res) {
                            if (Object.hasOwnProperty.call(res, key)) {
                                const element = res[key];
                                v.goods.push(element)
                            }
                        }

                    }
                }

            })
        }
    }
}

async function getMarketList(id) {
    const postData = {
        cateId: id,
        pageNum: 1,
        pageSize: 10,
    }
    const { code, data } = await marketApi.marketList(postData)
    if (code === 20000) {
        return data.records
    }
}

function processRecords(records) {
    for (let i = 0; i < records.length; i++) {
        records[i].priceVo.close += Math.random() * 0.001 - 0.0005;
    }
    return records;
}

// 去行情细节
function getDetail(params) {
    const { pairsName, id } = params
    cateId.value = params.cateId
    router.push({
        path: '/detail',
        query: {
            pairsName,
            id,
        }
    })
}








const timer = ref(null)
onMounted(async () => {
    await getCateList()
    timer.value = $animationInterVal(() => {
        if (cateList.value.length > 0) {
            getAllGoods()
        }
    }, 2000, true)
})

onBeforeUnmount(() => {
    if (timer.value != null) {
        timer.value()
    }
})

</script>

<style lang="less" scoped>
nav {
    width: 100%;
    height: 100vh;
    padding: 5px 0px 5px 0px;

    .van-tabs {
        height: 100%;

    }

    /deep/.van-tabs__nav {
        width: 70%;

        .van-tab {
            font-size: 18px;
        }

        .van-tab__text--ellipsis {
            display: block;
            word-break: keep-all;
        }
    }

    /deep/.van-tabs__content {
        height: 100%;
    }

    /deep/.van-tab--active {
        font-weight: normal;
    }

    /deep/.van-tabs__line {
        bottom: 20px;
        height: 2px;
    }
}

header {
    height: 40px;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    font-size: 16px;
    align-items: center;
    padding: 0px 0px 0px 15px;

    .auto {
        margin-left: auto;
        margin-right: 50px;
    }

    .price {
        margin-right: 40px;
    }
}

.goods {
    height: 60px;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    font-size: 16px;
    align-items: center;
    padding: 0px 0px 0px 10px;

    .item {
        font-size: 12px;
    }

    .name {
        font-weight: 600;
    }

    .auto {
        margin-left: auto;
        margin-right: 50px;
    }

    .price {
        margin-right: 15px;
        padding: 10px 20px;
        border-radius: 4px;
        color: #E5E5E5;
    }

    .green {
        background-color: #4CAF50;
    }

    .red {
        background-color: #F44336;
    }
}

main {
    padding: 15px 10px;
}
</style>